<template>
  <div class="activityPage">
    <div class="searchBox bgfff">
      <div class="tabsBox">
        <el-tabs v-model="form.type" @tab-click="handleClick">
          <el-tab-pane label="系统积分" name="1"></el-tab-pane>
          <el-tab-pane label="荣誉积分" name="2"></el-tab-pane>
          <el-tab-pane label="垃圾积分" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系电话：" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="积分周期：" prop="year">
              <el-date-picker
                v-model="form.year"
                type="year"
                placeholder="选择年"
                value-format="yyyy"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <!-- <div class="tablesCardTop">
        <el-button type="primary" size="small" @click="addShow = true"
          >导出</el-button
        >
      </div> -->
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <el-table-column prop="_code" label="排名" align="center" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" align="center">
        </el-table-column>
        <el-table-column
          v-if="form.type == 1"
          prop="accumulative_total"
          label="累计积分总额"
          align="center"
        />
        <el-table-column
          v-else-if="form.type == 2"
          prop="honor_points"
          label="荣誉积分总额"
          align="center"
        />
        <el-table-column
          v-else
          prop="waste_points"
          label="垃圾积分总额"
          align="center"
        />
        <el-table-column
          prop="expend_total"
          label="已兑换积分"
          align="center"
          v-if="form.type != 2"
        >
        </el-table-column>
        <el-table-column
          prop="point_log_sum"
          label="当前余额"
          align="center"
          v-if="form.type != 2"
        />
        <el-table-column prop="mobile" label="联系电话" align="center" />
        <el-table-column prop="house.name" label="居住房屋" align="center" />

        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div class="operateBtns">
              <el-link type="primary" @click="onBtns(scope.row)">查看</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankList } from "@/api/score.js";

export default {
  name: "",
  props: [""],

  data() {
    return {
      form: {
        type: "1",
        userName: "",
        mobile: "",
        year: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      projectId: "",
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      getRankList(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(info) {
      this.$router.push({
        path: "/userScore",
        query: {
          type: this.form.type,
          id: info.id,
        },
      });
    },
    handleClick() {
      this.form.page = 1;
      this.getList();
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.activityPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    height: 147px;
    .tabsBox {
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 280px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
